<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background-color: #45cbff;}
	#c1,span {background-color: #fff;}
	</style>
	<script>
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');			//绘制环境
		var num = 0.5;
		var timer = null;

		oGC.strokeRect(0.5,0.5,100,100);
		timer = setInterval(function () {
			num +=10;
			oGC.clearRect(0, 0, oC.width, oC.height);		//因为是行间样式可以直接用width和height
			if (num > 399) {
				num = 399;
				clearInterval(timer);
			};

			oGC.strokeRect(num, num, 100, 100);
			
		},30);

	}
	</script>
</head>
<body>
	<canvas id="c1" width="500" height="500">
		<span>不支持canvas的浏览器</span>
	</canvas>	<!-- 默认宽300 高150 -->
</body>
</html>